/**
* @file  Dev
* @author xiao_xie
* @date 2025-03-18
*/


import React from 'react';
import classNames from 'classnames';
import { useDropComponent } from '../../../../hooks/useDropComponent';
type DevProps = {
    children: React.ReactNode;
    accept: Array<string>
    id: number,
    margin?: MarginPaddingSize, // 外边距
    padding?: MarginPaddingSize, // 内边距
    isShowBorder?: boolean, // 是否显示边框
}

export enum MarginPaddingSize {
    large = 'large',
    medium = 'medium',
    small = 'small',
}

const Dev = ({ id, accept = [], children, margin, padding ,isShowBorder}: DevProps) => {
    const { isOver, drop } = useDropComponent(id, accept)
    const cls = classNames([
        'w-full border-2 border-solid rounded-md p-5 text-center text-xs text-gray-600 box-border',
        isOver ? 'border-[#6366F1] border-dashed' : 'border-[grey]',
        margin === MarginPaddingSize.large && 'my-5',
        margin === MarginPaddingSize.medium && 'my-3',
        margin === MarginPaddingSize.small && 'my-1',
        padding === MarginPaddingSize.large && 'p-5',
        padding === MarginPaddingSize.medium && 'p-3',
        padding === MarginPaddingSize.small && 'p-1',
        !isShowBorder && 'border-transparent',
    ]);
    return <div
        data-component-id={id}
        ref={drop}
        className={cls}>
        {React.Children.toArray(children).length > 0 ? children : <React.Fragment>
            拖拽组件或模板到这里
        </React.Fragment>}
    </div>;
};
export default Dev;
